<template>
	<view class="header-box left clearfix">
		<!--logo开始-->
		<view class="header-logo-box left clearfix">
			<view class="header-logo-icon left">
				<image src="/static/images/logo.png" mode="aspectFill" style="width:130px;height:40px;"></image>
			</view>
			<view class="header-menu left" @click="setMenu()">
				<uni-icons type="icon-caidan11" size="25" color="#fff" custom-prefix="iconfont"></uni-icons>
			</view>
		</view>
		<!--logo结束-->
		
		<view class="header-right right">
			<!--消息提醒-->
			<view class="header-message left relative">
				<uni-icons type="icon-IMliaotian-shixin" size="22" color="#fff" custom-prefix="iconfont"></uni-icons>
				<view class="header-message-number absolute">
					22
				</view>
			</view>
			
			<!--头像和昵称-->
			<view class="header-nickname right relative" @mouseenter="showMenu = true" @mouseleave="showMenu = false">
				<view class="header-nickname-image left">
					<image :src="userinfo.avatar" mode="aspectFill" style="width:40px;height:40px;"></image>
				</view>
				<view class="header-nickname-text left relative">
					<text>{{userinfo.name}}</text>
					<text style="font-size:12px;">{{userinfo.mobile}}</text>
					
					<view class="header-more absolute">
						<uni-icons :type="showMenu==false?'bottom':'top'" size="15" color="#fff"></uni-icons>
					</view>
					
				</view>
				
				<!--下拉菜单开始-->
				<view class="top-userinfo-menu left clearfix absolute" v-if="showMenu == true">
					<view class="top-userinfo-top absolute">
						<uni-icons type="icon-shaixuan-shangjiantou" custom-prefix="iconfont" size="50" color="#fff"></uni-icons>
					</view>
					
					<view class="top-userinfo-images left clearfix">
						<view class="top-userinfo-img left clearfix">
							<image :src="userinfo.avatar"></image>
						</view>
						<view class="top-userinfo-texts left clearfix">
							<view class="ellipsis">{{userinfo.name}}</view>
							<view class="ellipsis">{{userinfo._id}} <uni-icons type="icon-fuzhi_o" style="margin-left:10px;cursor:pointer;" title="复制" custom-prefix="iconfont" size="18" color="#999"></uni-icons></view>
						</view>
						
						<view class="top-price-box left clearfix">
							<view class="top-price-number left clearfix">
								<text>本月绩效</text>
								<text>9.5</text>
							</view>
							<view class="top-price-submit right clearfix" @click="alertPay()">
								<view>明细</view>
							</view>
						</view>
						
						
						<view class="top-items left clearfix" style="margin-top:30px;" @click="navigateTo('/pages/works/works')">
							<label>
								<uni-icons type="icon-yingyong7" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>待办任务</label>
						</view>
						
						<view class="top-items left clearfix" @click="navigateTo('/pages/userinfo/index?page=order')">
							<label>
								<uni-icons type="icon-liaotianduihua-xianxing" custom-prefix="iconfont" size="18" color="#666"></uni-icons>
							</label>
							<label>我的消息</label>
						</view>
						
						
						<view class="top-items left clearfix" @click="navigateTo('/pages/userinfo/index?page=edit')">
							<label>
								<uni-icons type="icon-wode5" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>账号设置</label>
						</view>
						
						<view class="top-items left clearfix" style="border-bottom:none;" @click="loginOut()">
							<label>
								<uni-icons type="icon-tuichudenglu3" custom-prefix="iconfont" size="16" color="#666"></uni-icons>
							</label>
							<label>退出登录</label>
						</view>
						
					</view>
				</view>
				<!--下拉菜单结束-->
				
			</view>
		</view>
		
	</view>
</template>

<style scoped>
	.top-right-upload{width:90px;height:32px;line-height:32px;text-align: center;border-radius: 5px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);margin-top:16px;font-size:12px;color:#fff;cursor:pointer;}
	.top-items label{margin-right:15px;}
	.top-items:hover{color:#999;cursor: pointer;}
	.top-items{width:70%;margin-left:15%;line-height:47px;border-bottom:1px solid #efefef;font-size:14px;color:#666;text-align: center;cursor:pointer;}
	.top-price-submit view{padding-left:15px;padding-right:15px;line-height:35px;height:35px;text-align: center;color:#fff;background:#2979ff;border-radius: 5px;margin-top:10px;margin-left:20px;font-size:13px;float:left;cursor:pointer;}
	.top-price-submit{width:40%;height:50px;line-height:50px;margin-top:10px;}
	.top-price-number text:last-child{font-size:18px;font-weight:bold;}
	.top-price-number text:first-child{font-size:14px;color:#666;}
	.top-price-number text{line-height:25px;text-align: center;float:left;text-align:center;width:100%;}
	.top-price-number{width:50%;height:50px;margin:10px;}
	.top-price-box{width:90%;height:68px;margin-left:5%;margin-top:30px;background-image: linear-gradient(75deg, #d9e5f2, #f0f7fe);border-radius: 8px;}
	.top-userinfo-texts view:last-child{font-size:13px;color:#999;}
	.top-userinfo-texts view:first-child{font-size:14px;font-weight:500;color:#333;}
	.top-userinfo-texts view{float:left;width:100%;line-height:20px;height:20px;}
	.top-userinfo-texts{width:calc(100% - 70px);height:40px;line-height:40px;margin:5px;}
	.top-userinfo-img image{width:40px;height:40px;border-radius: 50%;}
	.top-userinfo-img{width:40px;height:40px;border-radius: 50%;border:1px solid #eee;margin:5px;}
	.top-userinfo-images{width:90%;margin-left:5%;margin-top:20px;height:50px;}
	.top-userinfo-top{width:30px;height:30px;right:10px;top:-27px;}
	.top-userinfo-menu{width:300px;height:400px;background:#fff;z-index:99999999999999999999999;top:50px;right:0px;border-radius: 15px;box-shadow: 0 4px 12px 0 rgba(36, 104, 242, .08);}
	.header-more{width:18px;height:18px;right:0;top:12px;}
	.header-nickname-text text{width:100%;float:left;line-height:20px;}
	.header-nickname-text{width:120px;height:40px;margin-top:5px;font-size:14px;color:#fff;}
	.header-nickname-image image{border-radius: 50%;}
	.header-nickname-image{width:40px;height:40px;border-radius: 50%;margin:5px;}
	.header-nickname{width:180px;height:55px;margin-right:50px;margin-top:2px;cursor:pointer;z-index:999999999999;}
	.header-message-number{width:30px;height:30px;line-height:30px;border-radius: 999px;background:red;font-size:16px;color:#fff;text-align: center;top: -15px;right:-15px;transform: scale(.7);}
	.header-message{width:25px;height:25px;margin-top:18px;}
	.header-right{width:350px;height:55px;}
	.header-menu{width:25px;height:25px;margin-left:30px;margin-top:13px;cursor:pointer;}
	.header-logo-icon{width:160px;height:45px;margin-top:7px;}
	.header-logo-box{width:300px;height:55px;margin-left:50px;}
	.header-box{width:100%;height:55px;background: linear-gradient(90deg,#25b4c1, #298bfe 25%, #0f8ffd 51%, #4287fe);}
</style>

<script>
	var userinfo = uniCloud.importObject('userinfo',{customUI:true});
	var db = uniCloud.database();
	export default {
		name:"header",
		data() {
			return {
				showMenu:false,
				showLeftMenu:true,
				userinfo:{}
			};
		},
		created() {
			var that = this;
			//验证用户是否登录
			uni.getStorage({
				key:'userinfo-login',
				success:function(e){
					var data = e.data;
					var userinfo = data.userinfo;
					var expire = data.expire;
					var time = new Date().getTime();
					if(!userinfo || !userinfo._id || time > expire){
						db.collection('userinfo').where({_id:userinfo._id,is_admin:true}).get({getOne:true}).then(res=>{
							var userinfoData = res.result.data;
							if(!userinfoData || !userinfoData._id){
								//跳转到登录页面重新登录
								uni.redirectTo({
									url:'/pages/login/login'
								})
							}
						}).catch(err=>{
							//跳转到登录页面重新登录
							uni.redirectTo({
								url:'/pages/login/login'
							})
						});
						
					}else{
						that.userinfo = userinfo;
					}
				},
				fail() {
					uni.redirectTo({
						url:'/pages/login/login'
					})
				}
			})
		},
		methods:{
			//退出登录
			loginOut(){
				uni.removeStorage({
					key:'userinfo-login',
					success() {
						uni.redirectTo({
							url:'/pages/login/login'
						})
					}
				})
			},
			setMenu(){
				this.showLeftMenu = !this.showLeftMenu;
				this.$emit('showLeftMenu',this.showLeftMenu);
			}
		}
	}
</script>
